<template>
    <div>
        <div class="back-btn" @click="back">
            <div class="btn">返回</div>
        </div>
        <div v-if="timeList.length > 0" class="time-list">
            <ul>
                <li v-for="item in timeList" @click="jumpTo(item.id)">
                    <div class="title-part">
                        <div class="name clearfix">
                            <p>{{item.hour}}:{{item.minutes}}</p>
                            <p>提前{{item.aheadOrderDeadline}}分钟</p>
                        </div>
                        <div class="sub-name clearfix">
                            <p v-for="it in item.deliveryDate2">{{it}}</p>
                        </div>
                    </div>
                    <div class="arrow"></div>
                </li>
            </ul>
        </div>
        <div v-if="timeList.length === 0" class="empty" >空空如也～</div>
        <div class="btn-part" @click="jumpTo('')">
            <div class="save-btn">
                添加送餐时间
            </div>
        </div>
    </div>
</template>

<script>
    import Store from '@/store/Store.js'
    export default{
        data(){
            return{
                store:Store.TakeOutSettingStore,
                timeList:[
                  //   {
                  //   id:'123',
                  //   hour:'1',
                  //   minutes:'2',
                  //   aheadOrderDeadline:'3',
                  //   deliveryDate2:['星期一','星期二']
                  // }
                ]
            }
        },
        methods:{
            jumpTo(id){
                this.$router.push({
                    path:'/add_time',
                    query: {id: id}
                })
            },
            back(){
                this.$router.push({
                    path:'/'
                })
            },
            init(){
                document.title = '送餐时间列表';
                this.timeList = Store.TakeOutSettingStore.sendMealTime
            }
        },
        created(){
          this.init()
        }
    }
</script>

<style lang="less">
  .time-list {
    margin: 62px 10px 20px;
    background: #fff;
    padding: 0 15px;
    border-radius: 4px;
    li {
      position: relative;
      border-bottom: 1px #e4e4e4 solid;
      box-sizing: content-box;
      padding: 8px 0;
      &:last-child {
        border-bottom: none;
      }
      .title-part {
        .name {
          font-size: 20px;
          color: #333;
          line-height: 20px;
          p {
            float: left;
            margin-right: 10px;
            &:last-child {
              font-size: 12px;
              color: #666;
            }
          }
        }
        .sub-name {
          margin-top: 10px;
          font-size: 14px;
          color: #666;
          line-height: 14px;
          p {
            float: left;
            margin-right: 10px;
          }
        }
      }
      .showContent {
        height: 44px;
        line-height: 44px;
        font-size: 12px;
        padding-right: 15px;
        text-align: right;
      }
      .title-part {
        top: 8px;
        .sub-name {
          line-height: 20px;
          font-size: 12px;
          color: #999;
        }
      }
      .week-list {
        .week-btn {
          float: left;
          width: 33%;
          text-align: center;
          margin-bottom: 10px;
          p {
            margin: 0 10px;
            border: 1px #e2e2e2 solid;
            font-size: 14px;
            color: #999;
            height: 30px;
            line-height: 30px;
            border-radius: 4px;
          }
          .active {
            background-color: #e2e2e2;
            color: #333;
          }
        }
      }
      .cto-input, .cto-select, .showContent {
        border: none;
        height: 44px;
        font-size: 12px;
        background-color: #fff;
        text-align: right;
        padding-right: 15px;
        &::-webkit-input-placeholder { /* WebKit browsers */
          color: #d2d2d2;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
          color: #d2d2d2;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
          color: #d2d2d2;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10+ */
          color: #d2d2d2;
        }
      }
    }
  }

</style>